<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="libs/l7/light7.min.css">
    <link rel="stylesheet" href="Content/common.css">
    <link rel="stylesheet" href="Content/index.css">
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page" style="background:white;" id="app">
        <nav class="bar bar-tab">
            <a class="tab-item active" href="#">
                <span class="icon">
                    <img src="Images/home_active.png"/>
                </span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item external" href="enroll.html">
                <span class="icon">
                    <img src="Images/enroll.png"/>
                </span>
                <span class="tab-label">我要报名</span>
            </a>
            <a class="tab-item external" href="rankList.html">
                <span class="icon">
                    <img src="Images/rank.png"/>
                </span>
                <span class="tab-label">排行榜</span>
            </a>
            <a class="tab-item external" href="rule.html">
                <span class="icon">
                    <img src="Images/rule.png"/>
                </span>
                <span class="tab-label">活动规则</span>
            </a>
        </nav>
        <div class="content infinite-scroll" data-distance="100">
            <!-- banner -->
            <div class="banner">
                <img src="Images/index-banner.png" />
            </div>
            <!-- 投票状态 -->
            <div class="vote-state-box">
                <!-- enroll btn -->
                <div class="enroll-box">
                    <a class="enroll-btn">
                        <img src="Images/enroll-btn.png" />
                    </a>
                </div>
                <!-- state -->
                <div class="state">
                    <div class="item">
                        <img src="Images/paws.png" />
                        <div class="data-box">
                            <div class="data-title">参与人数</div>
                            <div class="data-number">1234</div>
                        </div>
                    </div>
                    <div class="item center">
                        <img src="Images/paws.png" />
                        <div class="data-box">
                            <div class="data-title">累计投票</div>
                            <div class="data-number">202345</div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="Images/paws.png" />
                        <div class="data-box">
                            <div class="data-title">访问人数</div>
                            <div class="data-number">238848</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- border -->
            <div class="bolang">
                <img src="Images/bolang.png" />
            </div>
            <!-- search -->
            <div class="search-box">
                <div class="search-input">
                    <input placeholder="请输入参赛者姓名或者编号" type="text" />
                </div>
                <a class="search-btn">
                    <img src="Images/search.png" />
                </a>
            </div>
            <!-- list -->
            <div class="index-list">
                <ul class="left">
                    <li class="index-item" v-for="item in leftArr" v-cloak>
                        <a class="external" href="detail.html">
                            <!-- img -->
                            <div class="img-box">
                                <img src="testimg/3.jpeg" />
                                <transition name="up">
                                    <div v-if="show" class="love up-love">
                                        <img src="Images/zan_add.png" />
                                    </div>
                                </transition>
                            </div>
                            <!-- info -->
                            <div class="info-box">
                                <div class="name">姓名:蛋挞</div>
                                <div class="num">
                                    <div class="left">编号：19930</div>
                                    <div class="right"><span>702</span>赞</div>
                                </div>
                                <div class="zan" v-bind:class="{ zaned: show }" @click="zan">为TA点赞</div>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="right">
                    <li class="index-item" v-for="item in rightArr">
                        <a class="external" href="detail.html">
                            <!-- img -->
                            <div class="img-box">
                                <img src="testimg/1.jpeg" />
                                <transition name="up">
                                    <div v-if="show" class="love up-love">
                                        <img src="Images/zan_add.png" />
                                    </div>
                                </transition>
                            </div>
                            <!-- info -->
                            <div class="info-box">
                                <div class="name">姓名:蛋挞</div>
                                <div class="num">
                                    <div class="left">编号：19930</div>
                                    <div class="right"><span>702</span>赞</div>
                                </div>
                            </div>
                            <div class="zan" v-bind:class="{ zaned: show }" @click="zan">为TA点赞</div>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- preloader -->
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type='text/javascript' src='libs/l7/light7.min.js' charset='utf-8'></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //这里从数据源里根据Index奇偶分别放到leftArr和rightArr里面。
                listArr: [],
                leftArr: [{}, {}, {}],
                rightArr: [{}, {}, {}],
                show: false
            },
            methods: {
                zan() {
                    //控制zan的属性，初始值为false
                    this.show = true;
                }
            }
        });
        $.init();
        var loading = false;
        var maxItems = 100;
        var itemsPerLoad = 20;

        function addItems() {
            app.leftArr.push({});
            app.rightArr.push({});
        }
        addItems();
        var lastIndex = 5;
        $(document).on('infinite', '.infinite-scroll', function() {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;

            setTimeout(function() {
                loading = false;

                if (lastIndex >= maxItems) {
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    $('.infinite-scroll-preloader').remove();
                    return;
                }

                addItems();
                lastIndex = app.leftArr.length;
            }, 1000);
        });
    </script>
</body>

</html>